import React from 'react';
import { Card, Row, Col, Statistic, Table, Tag, Button } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, SearchOutlined, PlusOutlined } from '@ant-design/icons';

const Dashboard = () => {
  // 模拟的数据统计
  const stats = [
    {
      title: '总营销活动数',
      value: 24,
      icon: <Tag color="blue" />,
      percent: 12,
      positive: true,
      color: '#1890ff',
    },
    {
      title: '活跃用户数',
      value: 1254,
      icon: <UserOutlined />,
      percent: 8,
      positive: true,
      color: '#52c41a',
    },
    {
      title: '本月优惠券使用',
      value: 234,
      icon: <TicketOutlined />,
      percent: 5,
      positive: true,
      color: '#faad14',
    },
    {
      title: '营销转化率',
      value: '3.6%',
      icon: <BarChartOutlined />,
      percent: 1.2,
      positive: false,
      color: '#f5222d',
    },
  ];

  // 模拟的活动数据
  const activitiesData = [
    {
      key: '1',
      name: '新年大促优惠券',
      type: '优惠券',
      status: '活跃',
      startDate: '2024-01-01',
      endDate: '2024-01-31',
      usageCount: 125,
      conversionRate: '4.2%',
    },
    {
      key: '2',
      name: '会员日折扣活动',
      type: '折扣卡',
      status: '活跃',
      startDate: '2024-01-15',
      endDate: '2024-01-15',
      usageCount: 89,
      conversionRate: '5.7%',
    },
    {
      key: '3',
      name: '满199减50',
      type: '满减活动',
      status: '活跃',
      startDate: '2024-01-10',
      endDate: '2024-02-10',
      usageCount: 156,
      conversionRate: '3.8%',
    },
    {
      key: '4',
      name: '春节套餐优惠',
      type: '套餐卡',
      status: '待开始',
      startDate: '2024-02-01',
      endDate: '2024-02-15',
      usageCount: 0,
      conversionRate: '0%',
    },
    {
      key: '5',
      name: '限时秒杀活动',
      type: '满减活动',
      status: '已结束',
      startDate: '2023-12-25',
      endDate: '2023-12-31',
      usageCount: 234,
      conversionRate: '6.5%',
    },
  ];

  // 表格列定义
  const columns = [
    {
      title: '活动名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a href="#">{text}</a>,
    },
    {
      title: '活动类型',
      dataIndex: 'type',
      key: 'type',
      render: (text) => {
        let color = '';
        switch (text) {
          case '优惠券':
            color = 'blue';
            break;
          case '折扣卡':
            color = 'green';
            break;
          case '满减活动':
            color = 'orange';
            break;
          case '套餐卡':
            color = 'purple';
            break;
          default:
            color = 'default';
        }
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text) => {
        let color = '';
        switch (text) {
          case '活跃':
            color = 'green';
            break;
          case '待开始':
            color = 'orange';
            break;
          case '已结束':
            color = 'default';
            break;
          default:
            color = 'default';
        }
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '开始日期',
      dataIndex: 'startDate',
      key: 'startDate',
    },
    {
      title: '结束日期',
      dataIndex: 'endDate',
      key: 'endDate',
    },
    {
      title: '使用次数',
      dataIndex: 'usageCount',
      key: 'usageCount',
    },
    {
      title: '转化率',
      dataIndex: 'conversionRate',
      key: 'conversionRate',
      render: (text) => {
        const rate = parseFloat(text);
        if (rate > 5) {
          return <span style={{ color: '#52c41a' }}>{text}</span>;
        }
        return text;
      },
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 24 }}>
        <h2>仪表盘</h2>
        <p style={{ color: '#8c8c8c' }}>欢迎查看营销中心运营数据概览</p>
      </div>

      {/* 数据统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        {stats.map((stat, index) => (
          <Col xs={24} sm={12} lg={6} key={index}>
            <Card bordered={false} style={{ borderRadius: 8 }}>
              <Statistic
                title={stat.title}
                value={stat.value}
                valueStyle={{ color: stat.color }}
                prefix={stat.icon}
                suffix={
                  <span style={{ color: stat.positive ? '#52c41a' : '#f5222d' }}>
                    {stat.positive ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                    {stat.percent}%
                  </span>
                }
              />
            </Card>
          </Col>
        ))}
      </Row>

      {/* 活动表格 */}
      <Card
        title="最近活动数据"
        bordered={false}
        style={{ borderRadius: 8 }}
        extra={
          <Button type="primary" icon={<PlusOutlined />}>
            创建新活动
          </Button>
        }
      >
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
          <div style={{ width: 200 }}>
            <Input
              placeholder="搜索活动"
              prefix={<SearchOutlined />}
              style={{ borderRadius: 4 }}
            />
          </div>
        </div>
        <Table
          columns={columns}
          dataSource={activitiesData}
          pagination={{
            pageSize: 5,
            showSizeChanger: false,
            showTotal: (total) => `共 ${total} 条记录`,
          }}
          rowKey="key"
        />
      </Card>
    </div>
  );
};

export default Dashboard;